<template>
    <div class="card-container">
    <div class="box_">
            <div class="box_item" v-for="(item, index) in 13" :key="index" @click="boxClick(item - 1)" :class="
            valueKey
                ?
                'is-active'
                : boxValue.indexOf(item - 1) === -1
                    ? ''
                    : 'is-active'
        ">
            {{ item - 1 }}
        </div>
        <div class="box_footer">
            <el-button @click="handleSubmit" round>确定</el-button>
        </div>
        </div>
    </div>
</template>
  
<script>
export default {
    props: {
        //多选数据
        options: {
            type: Array,
            default: () => []
        },
        // label绑定的值，默认为label，可以自定义
        labelKey: {
            type: String,
            default: "label"
        },
        // 值绑定的值，默认为""，可以自定义
        valueKey: {
            type: String,
            default: ""
        },
        levelConfigVOList: {
            type: Array,
            default: () => []
        },
        // 选中的值，默认为[]，可以自定义
        value: {
            type: Array,
            default: () => []
        }
    },
    data() {
        return {
            boxValue: JSON.parse(JSON.stringify(this.options)),
            // list: ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
        };
    },
    created() {

    },
    computed: {},
    methods: {
        handleSubmit() {

            let isValid = this.isValidSelection(this.boxValue)
            if (isValid) {
                let obj = {
                    isshow: false,
                }
                this.$emit("getData", obj);
                this.levelConfigVOList.forEach(item => {
                    console.log(item.intensity)
                    if (item.intensity != this.options) {
                        item.intensity = this.removeRepeat(item.intensity, this.boxValue)
                    } else {
                        item.intensity = this.boxValue
                    }
                })
                console.log('this.levelConfigVOList: ', this.boxValue, this.levelConfigVOList);

            } else {
                console.log('err')
                this.$modal.msgError('所选等级必须连续，不可跳选');
            }
        },
        isValidSelection(region) {
            // 检查每个区域内数字是否递增
            for (let j = 1; j < region.length; j++) {
                if (region[j] != region[j - 1] + 1) {
                    return false;
                }
            }
            return true;
        },
        removeRepeat(rawArr, removeArr) {
            let raw = new Set([...rawArr])
            for (let i of removeArr) {
                raw.delete(i)
            }
            return [...raw]
        },
        // 多选点击事件
        boxClick(item) {
            console.log(this.boxValue, 'this.boxValue')
            // if (this.boxValue.length == 0) {
            //     let _index
            //     this.levelConfigVOList.forEach((item, index) => {
            //         if (item.intensity.length == 0) {
            //             _index = index
            //         }
            //     })
            //     if (_index != 0 && _index != 4) {
            //         if (this.levelConfigVOList[_index - 1].length > 0) {
            //             console.log('456')
            //             let _arr = this.levelConfigVOList[_index - 1].intensity
            //             let maxlev = _arr[_arr.length - 1]
            //             if (item == maxlev + 1) {
            //                 this.boxValue.push(item);
            //             } else {
            //                 this.$modal.msgError(`所选等级必须为${maxlev + 1}`);
            //             }
            //         } else {
            //             console.log('789')
            //             let _arr = this.levelConfigVOList[_index + 1].intensity
            //             let maxlev = _arr[0]
            //             if (item == maxlev - 1) {
            //                 this.boxValue.push(item);
            //             } else {
            //                 this.$modal.msgError(`所选等级必须为${maxlev - 1}`);
            //             }
            //         }

            //     } else if (_index == 0) {
            //         if (item == 0) {
            //             this.boxValue.push(item);
            //         } else {
            //             this.$modal.msgError('所选等级必须为0')
            //         }
            //     } else {
            //         if (item == 12) {
            //             this.boxValue.push(item);
            //         } else {
            //             this.$modal.msgError('所选等级必须为12');
            //         }
            //     }
            // } else {
            if (this.boxValue.indexOf(item) === -1) {
                this.boxValue.push(item);
                this.boxValue.sort((a, b) => {
                    return a - b
                })
            } else {
                this.boxValue.splice(this.boxValue.indexOf(item), 1);
            }
        }

    },
    watch: {
        options: {
            handler(val) {
                this.boxValue = JSON.parse(JSON.stringify(val))
            },
            deep: true
        }


    }
};
</script>
  
<style lang="scss" scoped>
.box_ {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .box_item {
        cursor: pointer;
        box-sizing: border-box;
        width: 100%;
        height: 40px;
        background: #25333d;
        border: 1px solid #000;
        margin: 2px 10px 2px 0;
        font-weight: 700;
        color: #fff;
        border-radius: 5px;
        text-align: center;
        line-height: 40px;
        // box-shadow: 5px 5px 15px $leftColor;
        overflow: hidden;
    }

    .box_item:hover {
        opacity: 0.8;
    }

    .box_footer {
        margin-top: 15px;
        width: 100%;
    }

    .is-active {
        position: relative;
    }

    .is-active::after {
        content: "\2714";
        color: #fff;
        font-weight: normal;
        line-height: 20px;
        padding: 3px 0 0 5px;
        box-sizing: border-box;
        position: absolute;
        overflow: hidden;
        bottom: 0;
        right: 0;
        width: 20px;
        height: 20px;
        background: linear-gradient(-45deg,
                #5271c4,
                #5271c4 50%,
                transparent 50%,
                transparent 100%);
    }
}
</style>